<template>
<div class="wrapper">
  <a-page-header class="wrapper-header" title="计价单位" sub-title="不同产品的不同计价单位，计算价格方式不同"/>
  <a-card>
    <a-flex class="mb">
      <a-button type="primary" @click="showModal"><plus-outlined/>添加</a-button>
    </a-flex>
    <a-table :columns="columns" :data-source="dataSource" :row-selection="{}">
      
    </a-table>
  </a-card>
  <UnitsModal v-model:open="open"/>
</div>
</template>

<script lang="ts" setup>
import type { ColumnsType } from 'ant-design-vue/es/table';
import { ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import UnitsModal from './components/UnitsModal.vue';

const columns: ColumnsType = [
  {key:'name',title:' 名称',dataIndex:'name',width:200},
  {key:'method',title:'计价方式',dataIndex:'method'},
  {key:'action',title:'操作',width:120}
]
const dataSource = ref([])
const open  = ref<boolean>(false)
const showModal = () => {
  open.value = true
}
</script>

<style scoped>

</style>